<template>
  <div class="app-container flex-cloumn">
    <el-form
        v-show="showSearch"
        ref="queryRef"
        :model="queryParams"
    >
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form-item label="本方账户" prop="accId">
            <baseCombox v-model="accId"
                        :style="{width: '100%'}"
                        clearable multiple collapse-tags collapse-tags-tooltip
                        labelField="accName"
                        placeholder="本方账户"
                        size="small"
                        url="/trade/account/querySelfAccountCombox.action" valueField="accId"></baseCombox>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="挂钩标的" prop="instrument">
           <baseCombox url="/marketdata/instrument/getInstruments.action" clearable
                        size="small"
                        multiple collapse-tags collapse-tags-tooltip
                        valueField="code"
                        labelField="productName" placeholder="请选择标的"
                        v-model="instruments"></baseCombox>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="交易日期">
            <el-date-picker
                v-model="queryParams.begDate"
                :style="{width: '100%'}"
                type="date"
                :disabled-date="disabledDateBeg"
                size="small"
                value-format="YYYY-MM-DD"
                placeholder="选择开始日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="-">
            <el-date-picker
                v-model="queryParams.endDate"
                :style="{width: '100%'}"
                type="date"
                :disabled-date="disabledDateEnd"
                size="small"
                value-format="YYYY-MM-DD"
                placeholder="选择结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="交易类型">
            <dictCombox multiple v-model="tradeTypes" collapse-tags collapse-tags-tooltip
                        filterKey="LongOpen,LongClose,ShortOpen,ShortClose"
                        dictType="simpleTradeType" size="small"></dictCombox>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button
              v-hasPermi="['pricing:otctrade:group']"
              icon="Search"
              style="margin: 3px 3px"
              size="mini"
              type="primary"
              @click="handleQuery"
          >搜索
          </el-button>
          <el-button
              v-hasPermi="['pricing:otctrade:groupExport']"
              type="warning"
              style="margin: 3px 3px"
              icon="Download"
              size="small"
              @click="handleExport"
          >导出
          </el-button>
        </el-col>
      </el-row>

    </el-form>
    <xTable ref="tradeRef"
            v-loading="loading"
            :data="tradeGroupList"
            multiple="false"
            class="tableDragger"
            refId="tradeRef"
            @selection-change="handleSelectionChange"
            @row-dblclick="dbClickRow"
            :summary-method="Summary"
            show-summary
            sum-text="汇总">
      <template #columList>
        <el-table-column label="操作" align="center" class-name="small-padding" width="120"   >
          <template #default="scope">
            <el-button
                type="text"
                icon="View"
                @click="viewResult(scope.row)"
                v-hasPermi="['pricing:otctrade:list']"
            >明细
            </el-button>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" align="center" label="标的代码" prop="iCode" width="180"/>
        <el-table-column :show-overflow-tooltip="true" align="left" label="标的名称" prop="iName" width="180"></el-table-column>
        <el-table-column label="资产类型" align="center" prop="aType" :show-overflow-tooltip="true" width="150">
          <template #default="scope">
            <dict-tag :options="A_TYPE" :value="scope.row.aType"/>
          </template>
        </el-table-column>
        <el-table-column label="市场类型" align="center" prop="mType" :show-overflow-tooltip="true" width="150">
          <template #default="scope">
            <dict-tag :options="M_TYPE" :value="scope.row.mType"/>
          </template>
        </el-table-column>
        <el-table-column :formatter="formartEmptyTableP2" :show-overflow-tooltip="true" align="right" label="交易数量" width="180"
                         prop="volume"/>
        <el-table-column :formatter="formartEmptyTableP2" :show-overflow-tooltip="true" align="right" label="交易金额(元)" width="180"
                         prop="price"/>
        <el-table-column :formatter="formartEmptyTableP2" :show-overflow-tooltip="true" align="right" label="交易费用(元)" width="180"
                         prop="fee"/>
      </template>
    </xTable>
    <pagination
        style="margin:20px 0 20px 0"
        v-show="tradeGroupTotal > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="tradeGroupTotal"
        @pagination="getList"
    />

    <!-- 执行时弹出 -->
    <el-dialog :close-on-click-modal="false"
               draggable="true"
               :title="tradeTitle"
               v-model="open"
               destroy-on-close="true"
               width="1200px"
               append-to-body
              >
      <div class="app-container flex-cloumn">
        <xTable ref="tradeRef" v-loading="loading2" :data="tradeList" multiple="false" class="tableDragger_div"
              :summary-method="getMonitorSummary" show-summary sum-text="汇总" height="400px" lock-scroll
                refId="tradeRef">
          <template #columList>
            <el-table-column label="序号" type="index" width="40"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" align="center" width="200px" label="交易编号"
                             prop="tradeId"></el-table-column>
            <el-table-column label="交易状态" prop="tradeType" width="70px" show-overflow-tooltip>
              <template #default="scope">
                <dict-tag :options="tradeType" :value="scope.row.tradeType"/>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" align="center" label="交易日期"
                             prop="tradeDate"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" align="center" label="标的代码" prop="iCode"/>
            <el-table-column :show-overflow-tooltip="true" align="left" label="标的名称" prop="iName"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" align="left" label="本方账户" prop="accName"></el-table-column>
            <el-table-column :formatter="formartEmptyTableP2" :show-overflow-tooltip="true" align="right" label="数量"
                             prop="volume"/>
            <el-table-column :formatter="formartEmptyTableP2" :show-overflow-tooltip="true" align="right" label="价格(元)"
                             prop="price"/>
            <el-table-column :formatter="formartEmptyTableP2" :show-overflow-tooltip="true" align="right" label="金额(元)" width="180"
                             prop="amount"/>
            <el-table-column :formatter="formartEmptyTableP2" :show-overflow-tooltip="true" align="right" label="费用(元)"
                             prop="fee"/>
            <el-table-column :show-overflow-tooltip="true" align="center" label="币种" prop="currency">
              <template #default="scope">
                <dict-tag :options="CURRENCY" :value="scope.row.currency"/>
              </template>
            </el-table-column>
          </template>
        </xTable>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="SimpleQuery">
import {ref} from "vue";
import Underlyer from '@/xquant/base/underlyer'
import xTable from "@/xquant/base/xTable";
import {getToken} from "@/utils/auth";
import DictCombox from "@/xquant/base/dictCombox"
import InputAmount from '@/xquant/base/InputAmount'
import {
  getOtcTradeGroup,
  getOtcTradeByPage
} from "@/api/trade/otcoptiontrade";
import {get, sum} from "lodash";
import {formartEmptyTableP2} from "../../../utils/numberUtil";


const {proxy} = getCurrentInstance();
const {tradeType, CURRENCY, simpleTradeType, A_TYPE, M_TYPE} = proxy.useDict(
    "tradeType",
    "CURRENCY",
    'simpleTradeType',
    'A_TYPE',
    'M_TYPE'
);

// 任务列表
const tradeList = ref([]);
const tradeGroupList = ref([]);
const screenHeight = ref(document.documentElement.clientHeight - 250 + "px");
// 修改框弹出
const open = ref(false);
const showSearch = ref(true);
// 修改框标题
const tradeTitle = ref("");
const loading = ref(true);
const loading2 = ref(true);
//
const ids = ref([]);
//索引
const indexs = ref([]);
//多选数组
const accId = ref([]);
const instruments = ref([]);
const tradeTypes = ref([]);

const names = ref([]);
//数据
const rows = ref([]);
const single = ref(true);
const multiple = ref(true);
const tradeTotal = ref(0);
const tradeGroupTotal = ref(0);
const action = ref("");
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    accIds : null,
    tradeTypes: null,
    instruments: null,
    iCode: null,
    aType: null,
    mType: null,
    begDate: null,
    endDate: null,
  },
  queryTradeParams: {
    iCode: null,
    mType: null,
    tradeDate: null,
  },
});

const {queryParams, queryTradeParams} = toRefs(data);

const disabledDateBeg = (time) => {
  if (queryParams.value.endDate) {
    return time.getTime() > new Date(queryParams.value.endDate).getTime()
  }
}

const disabledDateEnd = (time) => {
  if (queryParams.value.begDate) {
    return time.getTime() < new Date(queryParams.value.begDate).getTime() - 86400000
  }
}

/** 查询按钮 */
function handleQuery() {
  queryParams.value.accIds = JSON.stringify(accId.value)
  queryParams.value.instruments = JSON.stringify(instruments.value)
  queryParams.value.tradeTypes = JSON.stringify(tradeTypes.value)
  getList();
}

function getMonitorSummary(param) {
  return proxy.getSummary(param,'汇总', 0, 6,'8,11',null,1)
}

function Summary(param) {
  return proxy.getSummary(param, '汇总', 0, 4, null, null,1)
}

/** 查询账户列表 */
function getList() {
  loading.value = false;
  getOtcTradeGroup(queryParams.value).then((response) => {
    tradeGroupList.value = response.msg.success;
    tradeGroupTotal.value=tradeGroupList.value==null?0:tradeGroupList.value.length
    loading.value = false;
  });
}


/** 导出按钮操作 */
function handleExport() {
  proxy.download("pricing/trade/exportSimpleTradeGroup.action", Object.assign({
    ...queryParams.value
  }, {pageNum: '', pageSize: ''}), `场内交易持仓汇总${proxy.getCurrTime('YYYYmmddHHMMSS',new Date())}.xlsx`);
}


/**
 *
 * 多选框  选中数据
 * */
function handleSelectionChange(selection) {
  if (selection.length == 0) {
    ids.value = [];
    indexs.value = [];
    names.value = [];
    rows.value = [];
  } else {
    ids.value = selection.map((item) => item.tradeId);
    indexs.value = selection.map((item) => item.index);
    rows.value = selection.map((item) => item);
  }
  multiple.value = !selection.length;
}
function viewResult(row) {
  dbClickRow(row)
}

function dbClickRow(row) {
  tradeTitle.value = row.iName;
  loading2.value = false;
  open.value = true;
  data.queryTradeParams.iCode = row.iCode;
  data.queryTradeParams.aType = row.aType;
  data.queryTradeParams.mType = row.mType;
  data.queryTradeParams.begDate = row.begDate;
  data.queryTradeParams.endDate = row.endDate;
  data.queryTradeParams.tradeType = row.tradeType;
  data.queryTradeParams.accId = row.accId;
  getTradeList();
}

function getTradeList() {
  getOtcTradeByPage(data.queryTradeParams).then((response) => {
    tradeList.value = response.rows;
    tradeTotal.value = response.total;
    loading2.value = false;
  });
}

onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 300);
  window.onresize = function temp() {
    screenHeight.value = document.documentElement.clientHeight - 250 + "px;";
  };
})

getList();
</script>

<style scoped='scoped'>
.tableDragger_div {
  overflow:hidden;
}
</style>
